<template>
  <div class="lm-comboPlugin">
    <div class="title">{{ params.title }}</div>
    <el-radio-group v-model="indexKey">
      <el-radio v-for="item in params.comboType" :key="item.index" :label="item.id">{{ item.name }}</el-radio>
    </el-radio-group>
    <div class="body">{{ desc }}</div>
  </div>
</template>
<script>
export default {
  name: 'ComboPlugin',
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      indexKey: 0,
      redioMap: {}
    };
  },
  computed: {
    desc() {
      return this.redioMap[this.indexKey] && this.redioMap[this.indexKey].desc;
    }
  },
  mounted() {
    if (this.params) {
      this.params.comboType.map(res => {
        this.redioMap[res.id] = res;
      });
    }
    console.warn(this.redioMap);
  },
  methods: {
    changeType(type) {
      this.plan.plan = type;
    }
  }
};
</script>
<style lang="scss" scoped>
.lm-comboPlugin{
    margin-bottom: 20px;
    .title{
        padding-left: 10px;
        font-size: 16px;
        font-weight: bold;
        line-height: 21px;
        color: #333333;
        border-left: 3px solid #508FCC;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .body{
        // width: 872px;
        height: 89px;
        background: #F8F8FA;
        opacity: 1;
        border-radius: 6px;
        margin-top: 10px;
        padding:10px;
    }
}
</style>
